<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/animate.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url("img/bg.jpg") no-repeat center;
            opacity: .8;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style-type: none;
        }

        img {
            width: 960px;
            height: 540px;
        }

        .box {
            overflow: hidden;
            position: relative;
            width: 960px;
            height: 540px;
            margin: 0 auto;
        }

        /*左右箭头*/
        .prev,
        .next {
            display: none;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 60px;
            height: 50px;
            background-color: rgba(255, 255, 255, .3);
            text-align: center;
            line-height: 50px;
            font-size: 40px;
            color: #fff;
            z-index: 2;
        }

        .prev {
            left: 0;
        }

        .prev::after {
            content: '◁';
        }

        .next::after {
            content: '▷';
        }

        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .prev:hover::after {
            color: #f15050;
            content: '◀';
        }

        .next:hover::after {
            color: #f15050;
            content: '▶';
        }

        /*轮播图片*/
        .box ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 700%;
            height: 100%;
        }

        .box li {
            float: left;
        }

        /*小圆圈*/
        .circle {
            position: absolute;
            bottom: 10px;
            left: 20px;
        }

        .circle li {
            float: left;
            width: 13px;
            height: 13px;
            background-color: rgba(0, 0, 0, .5);
            border-radius: 50%;
            margin: 0 4px;
            cursor: pointer;
        }

        .circle .current {
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 左箭头 -->
    <a href="javascript:;" class="prev"></a>
    <!-- 右箭头 -->
    <a href="javascript:;" class="next"></a>
    <!--轮播图片-->
    <ul>
        <li>
            <a href="javascript:;"><img src="img/1.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/2.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/3.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/4.jpg" alt=""></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/5.jpg" alt=""></a>
        </li>
    </ul>
    <!--小圆圈-->
    <ol class="circle"></ol>
</div>

<script>
    window.addEventListener('load', function () {
        // 获取元素
        var box = document.querySelector('.box');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        // 大盒自的宽度 也就是每张图片的宽度
        var boxWidth = box.offsetWidth;
        // 鼠标经过显示左右箭头
        box.addEventListener('mousemove', function () {
            prev.style.display = 'block';
            next.style.display = 'block';
            // 停止 定时器
            clearInterval(timer);
            timer = null; // 清楚定时器变量
        })
        // 鼠标离开隐藏左右箭头
        box.addEventListener('mouseout', function () {
            prev.style.display = 'none';
            next.style.display = 'none';
            // 开启定时器
            timer = setInterval(function () {
                // 手动调用事件
                next.click();
            }, 2000)
        })
        var ul = box.querySelector('ul');
        var ol = box.querySelector('ol');
        // console.log(ul.children.length);
        // 动态创建 小圆圈的个数,有几张图片就创建几个小圆圈
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            ol.appendChild(li);
            // 给每个小圆圈添加一个自定义属性 记录索引
            li.setAttribute('index', i);
            // 给每个小圆圈添加点击事件
            li.addEventListener('click', function () {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                // ul 的移动距离 小圆圈索引号 乘以 图片的宽度 注意是负数
                // 当我们点击了某个小圆圈 就拿到了当前小圆圈的索引号
                var index = this.getAttribute('index');
                num = index;
                circle = index;
                // console.log(index);
                // 移动的距离等于 索引号乘以图片的宽度
                animate(ul, -index * boxWidth);
            })
            // 网页一开始第一个小圆圈是选中状态
            ol.children[0].className = 'current';
        }
        // 右边箭头
        var num = 0; // 设置一个计数器,点击一次加一次
        var circle = 0; // 设置小圆圈的计数器
        // 克隆第一张图片
        var first = ul.children[0].cloneNode(true);
        var flag = true; // 节流阀变量 当上一个函数动画执行完毕后再去执行下一个动画函数,让事件无法连续触发
        // 添加在最后面 这样可以实现无缝轮播
        ul.appendChild(first);
        next.addEventListener('click', function () {
            if (flag) {
                flag = false; // 关闭节流阀
                if (num === ul.children.length - 1) {
                    num = 0;
                    ul.style.left = 0;
                }
                num++;
                animate(ul, -num * boxWidth, function () {
                    flag = true; // 开启节流阀
                });
                circle++;
                if (circle === ol.children.length) {
                    circle = 0;
                }
                getCircle(); // 调用函数
            }
        })

        // 左边箭头
        prev.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num === 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * boxWidth + 'px';
                }
                num--;
                animate(ul, -num * boxWidth, function () {
                    flag = true;
                });
                circle--;
                if (circle < 0) {
                    circle = ol.children.length - 1;
                }
                getCircle(); // 调用函数
            }
        })

        // 封装一个清楚小圆圈选中的函数
        function getCircle() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下当前小圆圈的current类名
            ol.children[circle].className = 'current';
        }

        // 自动播放 定时器
        var timer = setInterval(function () {
            // 手动调用事件
            next.click();
        }, 2000)
    })
</script>
</body>
</html>